<template>
  <Layout>
    <template #main>
      <div class="blogBodyMain" v-loading="isLoading" ref="blogBodyMain">
        <BlogBodyMain :blog="data" v-if="data" />
        <BlogComment v-if="!isLoading" />
        <ReturnTop />
      </div>
    </template>
    <template #right>
      <BlogBodyRight :List="data.toc" v-if="data" />
    </template>
  </Layout>
</template>

<script>
import { getBLogBody } from "@/api/getBlogBody";
import Layout from "@/components/Layout";
import BlogBodyMain from "./BLogBodyMain";
import BlogBodyRight from "./BlogBodyRight";
import BlogComment from "./BlogComment";
import ReturnTop from '@/components/ReturnTop'
import setTitle from '../../../utils/siteTitlle'

export default {
  data() {
    return {
      data: null,
      isLoading: true,
      scrollValue: 0,
    };
  },
  components: {
    Layout,
    BlogBodyMain,
    BlogBodyRight,
    BlogComment,
    ReturnTop,
  },
  methods: {
    handleScroll() {
      this.$bus.$emit("MainScroll", this.$refs.blogBodyMain);
    },
    ReturnTop(top){
      this.$refs.blogBodyMain.scrollTop=top;
    }
  },
  async created() {
    this.data = await getBLogBody(this.$route.params.id);
    this.isLoading = false;
    //刷新页面跳转到刷新之前的描点处
    const hash = location.hash;
    location.hash = "";
    setTimeout(() => {
      location.hash = hash;
    }, 10);
    this.$bus.$on('returnTop',this.ReturnTop);
    setTitle.setRouterTitle(this.data.title);
  },
  destroyed() {
      this.$bus.$off("MainScroll", this.$refs.blogBodyMain);
    this.$bus.$off('returnTop',this.ReturnTop)

    
  },
  
  mounted() {
    this.$refs.blogBodyMain.addEventListener("scroll", this.handleScroll);
    },
};
</script>

<style lang="less" scoped>
.blogBodyMain {
  position: relative;
  height: 100%;
  width: auto;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

</style>